﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="chapter.aspx.cs" Inherits="chapter" %>

<asp:Content ContentPlaceHolderID="titleContent" runat="Server">
    优学校 - 
</asp:Content>
<asp:Content ContentPlaceHolderID="headContent" runat="Server">
    <link href="/content/video.js/video-js.css" rel="stylesheet" />
    <style type="text/css">
        .scroll_horizontal {
            position: relative;
            height: 160px;
            padding: 10px;
            background-color: #eee;
            border: 1px solid gray;
            margin-right: 59px;
        }

            .scroll_horizontal .box {
                overflow: hidden;
                position: relative;
                width: 90%;
                margin: 0 auto;
            }

            .scroll_horizontal .list {
                overflow: hidden;
                width: 9999px;
                list-style-type: none;
            }

                .scroll_horizontal .list li {
                    float: left;
                    width: 200px;
                }

            .scroll_horizontal .prev,
            .scroll_horizontal .next {
                position: absolute;
                top: 50%;
                margin-top: -25px;
                width: 40px;
                height: 50px;
                background-image: url(/content/jquery.cxscroll-1.2.2/img/control.png);
                background-repeat: no-repeat;
                font: 0/0 Arial;
                cursor: pointer;
            }

            .scroll_horizontal .prev {
                left: 5px;
                background-position: 0 0;
            }

            .scroll_horizontal .next {
                right: 5px;
                background-position: -40px 0;
            }

            .scroll_horizontal .prev:hover {
                background-position: 0 -50px;
            }

            .scroll_horizontal .next:hover {
                background-position: -40px -50px;
            }

        .options {
            list-style-type: none;
        }
    </style>
</asp:Content>
<asp:Content ContentPlaceHolderID="mainContent" runat="Server">
    <h4 style="padding-left: 4%;">初一 > 语文 > 一.我们的祖国</h4>
    <form runat="server">
        <h3 class="text-center"><%=Data("title")%></h3>
        <div style="padding-left: 5%; padding-right: 5%;">
            <div>
                <%=Data("content") %>
            </div>
            <div>
                <div <%= (lstVideo.DataSource as object[]) == null || (lstVideo.DataSource as object[]).Length == 0 ? "class=\"hidden\"" : string.Empty %>>
                    <h4>相关视频:</h4>
                    <hr style="margin-bottom: 5px; margin-top: 5px; margin-right: 59px" />
                    <div id="video-list" class="scroll_horizontal">
                        <div class="box">
                            <ul class="list">
                                <asp:Repeater runat="server" ID="lstVideo">
                                    <ItemTemplate>
                                        <li>
                                            <div>
                                                <input type="hidden" class="video-key" value="<%# Eval("vid") %>" />
                                                <input type="hidden" class="video-key" value="<%# Eval("href") %>" />
                                                <img src="<%# Eval("thumbnail") %>" style="width: 180px; height: 120px;" alt="<%# Eval("title") %>" onclick="autoPlay('<%# Eval("title") %>','<%# Eval("href")%>');" />
                                                <p onclick="autoPlay('<%# Eval("title") %>','<%# Eval("href")%>');"><%# Eval("title") %></p>
                                            </div>
                                        </li>
                                    </ItemTemplate>
                                </asp:Repeater>
                            </ul>
                        </div>
                    </div>
                </div>
                <br />
                <div>
                    <h4 class="pull-left">练习题:</h4>
                    <div class="pull-right" style="margin-right: 59px; margin-top: 7px;">
                        <label>
                            <input type="checkbox" onchange="if(this.checked) $('.result_link').removeClass('hidden'); else $('.result_link').addClass('hidden');" />显示答案
                        </label>
                    </div>
                    <div class="clearfix"></div>
                </div>

                <hr style="margin-bottom: 5px; margin-top: 5px; margin-right: 59px" />
                <div style="margin-right: 59px;" id="practice">
                    <asp:Repeater ID="listQuestions" runat="server">
                        <ItemTemplate>
                            <div id="question_div_<%# Container.ItemIndex %>">
                                <input type="hidden" name="qst_qid_<%# Container.ItemIndex %>" value="<%# Eval("qid") %>" />
                                <input type="hidden" name="qst_type_<%# Container.ItemIndex %>" value="<%# Eval("type") %>" />
                                <input type="hidden" name="qst_title_<%# Container.ItemIndex %>" value="<%# Eval("title") %>" />
                                <input type="hidden" name="qst_content_<%# Container.ItemIndex %>" value="<%# Eval("content") %>" />
                                <input type="hidden" name="qst_score_<%# Container.ItemIndex %>" value="<%# Eval("score") %>" />
                                <input type="hidden" name="qst_options_<%# Container.ItemIndex %>" value='<%# Eval("options") %>' />
                                <input type="hidden" name="qst_answers_<%# Container.ItemIndex %>" value='<%# Eval("answers") %>' />
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
            </div>
        </div>
        <div class="modal fade" id="player_dialog" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog">
                <div class="modal-content" style="width: 800px;">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body" id="modal-body">
                        <video id="video-player" class="video-js" controls preload="auto" style="width: 100%;" height="500" data-setup="{}" oncontextmenu="return false;">
                            <p class="vjs-no-js">
                                你的浏览器版本过低，请升级。
                            </p>
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </form>
</asp:Content>

<asp:Content ContentPlaceHolderID="scriptContent" runat="Server">
    <script src="/content/jquery.cxscroll-1.2.2/js/jquery.cxscroll.js" type="text/javascript"></script>
    <script src="/content/video.js/videojs-ie8.min.js" type="text/javascript"></script>
    <script src="/content/video.js/video.js" type="text/javascript"></script>
    <script type="text/javascript">
        videojs.options.flash.swf = "/content/video-js.swf";
        $(document).ready(function () {
            $('#video-list').cxScroll({ auto: false });
            $("div[id^='question_div_']").each(function (idx, el) {
                var idx = parseInt(this.id.replace("question_div_", "0"));
                var qid = parseInt($(this).find("input[name^='qst_qid']").val());
                var type = parseInt($(this).find("input[name^='qst_type']").val());
                var title = $(this).find("input[name^='qst_title']").val();
                var content = $(this).find("input[name^='qst_content']").val();
                var score = parseFloat($(this).find("input[name^='qst_score']").val());
                var options = eval("(" + $(this).find("input[name^='qst_options']").val() + ")");
                var answers = $(this).find("input[name^='qst_answers']").val();

                var toolbar = "<p class=\"hidden result_link\"><button  type=\"button\" class=\"btn btn-default\" onclick=\"$(this).popover({title:'正确答案',container:'body',placement:'top',content:$('input[name=&quot;qst_answers_" + idx + "&quot;]').val(),trigger:'focus'});$(this).popover('show');\">显示答案</button></p>";
                $(this).append($(question_template(idx, qid, type, title, content, score, options) + toolbar));
            });
        });

        function option_template(type, options) {
            var html = ["<ul class=\"options\">"];
            var stypes = ["radio", "checkbox"];
            for (var i = 0; i < options.length; i++) {
                html.push("<li>");
                html.push("<label class=\"" + stypes[type] + " inline\"><input type=\"" + stypes[type] + "\" name=\"chk_option_\"" + options[i].oid + " value=\"1\" />" + options[i].answer + "</label>");
                html.push("</li>");
            }
            html.push("</ul>");

            return html.join("");
        };

        function text_tempate(idx, qid, type, title, content, score, options) {
            //
            var mask = /______/g;
            return title.replace(mask, function () {
                return "<input style=\"border-style: none none solid none; border-bottom-width: 1px; background-color: transparent;\" type=\"text\" />";
            });
        }
        function question_template(idx, qid, type, title, content, score, options) {
            //0 单选 1 多选 2 填空 3 简答
            var stitle = type == 2 ? text_tempate.apply(this, arguments) : title;
            var html = "<p style=\"font-size: 16px;\">" + (idx + 1) + " . " + stitle + "</p>"
            if (type == 0 || type == 1) {
                html += option_template(type, options);
            }
            else {
                html += "<p>" + (content || "") + "</p>";
            }

            if (type == 3) {
                html += "<textarea class =\"form-control\" rows=\"5\" onkeyup=\"var r = this.createTextRange().getClientRects().length;this.style.height = ((r < 5 ? 5 : r) * 22) + 'px';\"></textarea><div>&nbsp;</div>";
            }
            return html;
        }

        function autoPlay(title, src) {
            $("#player_dialog").find(".modal-dialog").css('margin-left', ($(document.body).width() - 800) / 2);
            $("#player_dialog").modal().find(".modal-title").text(title);
            $("#player_dialog").on("hide.bs.modal", function () {
                videojs("#video-player").pause();
            });
            videojs("#video-player").src(src);
            videojs("#video-player").play();
        }
    </script>
</asp:Content>


